<template>
	<view class="padding_30">
		<view class="input-item">
			<view class="input-title">
				支付宝账号
			</view>
			<view class="input-box">
				<input class="Input" type="text" placeholder="请输入支付宝账号" :disabled="state==1?true:false" v-model="userstore.accountBindInfo.number" />
			</view>
		</view>
		<view class="input-item">
			<view class="input-title">
				真实姓名
			</view>
			<view class="input-box">
				<input class="Input" type="text" placeholder="请输入真实姓名" :disabled="state==1?true:false" v-model="userstore.accountBindInfo.name" />
			</view>
		</view>
		<view class="input-item">
			<view class="input-title">
				手机号码
			</view>
			<view class="input-box">
				<input class="Input" type="number" maxlength="11" placeholder="请输入手机号码" :disabled="state==1?true:false" v-model="userstore.accountBindInfo.mobile" />
			</view>
		</view>
		<view class="input-item" v-if="state==0">
			<view class="input-title">
				手机验证码
			</view>
			<view class="input-box2">
				<input class="Input" type="text" placeholder="请输入验证码" v-model="code" />
				<uv-code :seconds="seconds" ref="codeRef" @change="codeChange"></uv-code>
				<text class="code" @click="getCodes">{{tips}}</text>
			</view>
		</view>
		<text class="withdraw-tip">提示：请正确填写收款人的支付宝账户和真实的收款人姓名，否
则将无法正常收款</text>
		<view class="btn" @click="bind" v-if="state==0">
			绑定收款账号
		</view>
		<view class="edit-btn" v-if="state==1" @click="state=0">
			修改收款账号
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { ref } from 'vue';
	import {throttle} from '@/utils/utils.js'
	import {useUserStore} from '@/store/modules/user.js'
	const userstore = useUserStore()
	const state = ref(0)
	const code = ref('')
	const seconds = ref(60)
	const tips = ref('')
	const codeRef = ref()
	onLoad((options)=>{
		state.value = options.state
		userstore.getAccountBindInfo()
	})
	const codeChange = (text) => {
		tips.value = text
	}
	const getCodes = throttle(async () => {
			if (codeRef.value.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				})
				let res = await userstore.getCode({mobile:userstore.accountBindInfo.mobile})
				if (res.code == 200) {
					uni.hideLoading();
					uni.$uv.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					codeRef.value.start();
				} else {
					uni.$uv.toast(res.message)
				}
			} else {
				uni.$uv.toast('倒计时结束后再发送');
			}
		},500)
	const bind = throttle(async()=>{
		let params = {
			mobile:userstore.accountBindInfo.mobile,
			name:userstore.accountBindInfo.name,
			number:userstore.accountBindInfo.number,
			code:code.value
		}
		const res = await userstore.editAccountBindInfo(params)
		if(res.code==200){
			state.value = 1
		}
	})
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.input-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 112rpx;
		margin: auto;
		margin-bottom: 30rpx;
		padding: 30rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		.input-title{
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}
		.input-box{
			text-align: right;
			.Input{
				font-size: 28rpx;
			}
		}
		.input-box2{
			display: flex;
			text-align: right;
			.Input{
				font-size: 28rpx;
			}
			.code{
				padding-left: 30rpx;
				font-size: 28rpx;
				color:#FE3052;
			}
		}
		.state{
			font-weight: 400;
			font-size: 28rpx;
			color: #67C23A;
		}
	}
	.withdraw-tip{
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}
	.btn{
		position: fixed;
		bottom: 30rpx;
		transform: translate(-50%,0);
		left: 50%;
	}
	.edit-btn{
		position: fixed;
		bottom: 30rpx;
		width: 690rpx;
		height: 100rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #666666;
		line-height: 100rpx;
		text-align: center;
		border: 2rpx solid #D8D8D8;
	}
</style>